<template>
  <div class="detail-content">
    <div class="banner">
      <div class="course-information">
        <div
          class="course-information-img"
          :style="`background-image:url(${courseIntroduce.coverPath})`"
        ></div>
        <div class="course-information-text">
          <span class="course-information-title">{{
            courseIntroduce.seriesName
          }}</span>
          <div class="teacher-information-row">
            <div class="header-img">
              <img :src="courseIntroduce.expertFace" alt="" />
            </div>
            <span class="teacher-name">{{ courseIntroduce.expertName }}</span>
            <div
              class="follow"
              :class="
                courseIntroduce.expertIsSub === '1'
                  ? 'course-follow'
                  : 'course-follownot'
              "
              @click="follow"
            >
              + {{ courseIntroduce.expertIsSub === "1" ? "已关注" : "关注" }}
            </div>
          </div>
          <div class="project-all">
            <span
              class="project-el"
              v-for="(item, index) in courseIntroduce.categoryStr.split(' ')"
              :key="index"
              >{{ item }}</span
            >
          </div>
          <div class="active">
            <span>{{ courseIntroduce.courseCount || 0 }} 节课</span>
            <span class="divider">丨</span>
            <span>{{
              $options.filters.getHMS(courseIntroduce.courseDuration)
            }}</span>
            <span class="divider">丨</span>
            <span>{{ courseIntroduce.courseWatchCount || 0 }} 浏览量</span>
            <span class="divider">丨</span>
            <span>{{ courseIntroduce.learnNum || 0 }} 人学习</span>
            <span class="divider">丨</span>
            <span
              >{{ (courseIntroduce.goodsEvRate * 100).toFixed(0) || 0 }}%
              好评</span
            >
          </div>
        </div>
        <div class="collect-share">
          <div style="padding: 0 10px">
            <span style="color: #ffffff; font-size: 14px"
              ><Icon
                style="color: #ffffff; padding-right: 3px"
                type="ios-thumbs-up-outline"
                size="18"
                @click="addBaseD()"
              />{{ courseIntroduce.likes }}</span
            >
          </div>
          <div class="collect" @click="toCollect">
            <Icon
              :type="
                courseIntroduce.isConsult == '1' ? 'md-star' : 'md-star-outline'
              "
              size="18"
              :color="courseIntroduce.isConsult == '1' ? '#fcae17' : ''"
            />
            <span>收藏</span>
          </div>
          <div class="share">
            <img src="@/assets/course/share.png" alt="" />
            <span>分享</span>
          </div>
        </div>
      </div>
      <div class="sell">
        <span class="price-title"
          >价格:<span class="price" :style="`color:${isFreeHandle()}`">{{
            params.isCharge == "0"
              ? "免费"
              : courseIntroduce.price
              ? courseIntroduce.price.toFixed(2)
              : ""
          }}</span></span
        >
        <Button type="primary" class="buy-btn" @click="buyHandle">{{
          params.isCharge == "1" && params.payStatus == "UNPAID"
            ? "立即购买"
            : "加入学习"
        }}</Button>
      </div>
    </div>
    <div class="course-wrap">
      <Tabs :value="name" @on-click="tabChange">
        <TabPane label="课程介绍" name="name1">
          <p
            v-html="courseIntroduce.courseDescribe"
            v-if="name === 'name1'"
          ></p>
          <empty v-if="!courseIntroduce.courseDescribe" />
        </TabPane>
        <TabPane label="课程目录" name="name2" class="directory">
          <div v-if="name === 'name2'">
            <Course
              :courseData="item"
              :payStatus="params.payStatus"
              v-for="item in courseData"
              :key="item.id"
              @freeTrial="freeTrial"
            />
          </div>
        </TabPane>
        <TabPane label="课程评论" name="name3" class="comments">
          <Comment v-if="name === 'name3'" :courseId="params.id" />
        </TabPane>
        <TabPane label="课程推荐" name="name4">
          <div class="recommend-list" v-if="name === 'name4'">
            <Recommended :courseRecommended="courseRecommended"></Recommended>
          </div>
        </TabPane>
      </Tabs>
    </div>
    <Footer :top="60"></Footer>
    <div class="modal-content">
      <!-- 预约弹窗 -->
      <div class="appointment-modal">
        <Modal
          v-model="modal1"
          title="确认预约信息"
          @on-ok="okHandle"
          @on-cancel="cancelHandle"
          width="1000"
          footer-hide
          style="padding: 0px 20px"
        >
          <div class="content">
            <div class="title">预约人信息</div>
            <div class="info">
              <div
                class="face"
                :style="{
                  backgroundImage: 'url(' + detailInfo.face + ')',
                }"
              ></div>
              <div class="school-info">
                <div class="name">{{ detailInfo.realName }}</div>
                <div class="school-name">
                  <!--<span>{{ detailInfo.memberSite }}</span>-->
                  <span>{{ detailInfo.mobile }}</span>
                </div>
              </div>
            </div>
            <div class="title base-info-title">购买课程信息</div>
            <div class="base-info">
              <div class="base">
                <Row>
                  <Col span="4">
                    <img style="width: 100%" :src="modelData.coverPath" alt="">
                  </Col>
                  <Col span="17" offset="1">
                    <div style="font-size: 16px;">{{modelData.seriesName}}</div>
                    <div style="padding-top: 30px;color: #939393">永久看看</div>
                  </Col>
                  <Col span="2" style="font-size: 14px">￥ {{modelData.peices}}</Col>
                </Row>
              </div>
            </div>
          </div>
          <div class="pay-row">
            <div class="price">
              <span style="font-weight: normal">应付总额 <span>¥ </span> <span style="font-size: 28px">{{modelData.peices }}</span></span>
            </div>
            <div class="pay-btn" @click="appointHandle">立即购买</div>
          </div>
        </Modal>
      </div>

      <!-- 支付弹窗 -->
      <div class="pay-modal">
        <Modal
          v-model="modal2"
          title="返回我的预约"
          @on-ok="okHandle"
          @on-cancel="cancelHandle"
          width="1000"
        >
          <div class="pay-content">
            <p>订单提交成功，请尽快付款！订单号:240504585449</p>
            <div class="qr-code"></div>
            <span class="title">{{ payWay == "wx" ? "微信支付" : "支付宝支付" }}</span>
            <span>距离二维码过期还剩59秒，过期后请刷新页面重新获取二维码</span>
            <span class="price">
              <span>应支付金额</span>
              <span>￥</span>
              <span>80.00</span>
            </span>
            <div class="prompt">
              <img src="@/assets/base/saoma.png" alt="" />
              <div class="prompt-text">
                <span>请使用{{ payWay == "wx" ? "微信" : "支付宝" }}扫一扫</span>
                <span>扫一扫二维码支付</span>
              </div>
            </div>
            <div class="choose-back" @click="modalHandle">
              <img src="@/assets/base/back.png" alt="" />
              <span>选择其他支付方式</span>
            </div>
          </div>
        </Modal>
      </div>

      <!-- 支付成功弹窗 -->
      <div class="success">
        <Modal
          v-model="modal3"
          title=""
          @on-ok="okHandle"
          @on-cancel="cancelHandle"
          width="1000"
        >
          <div class="success-content">
            <img style="width: 200px;height: 150px" :src="modelData.coverPath" alt="">
            <span class="success-title">加入学习成功!</span>
            <span class="id">订单编号：{{ modelData3.timestamp }}</span>
            <!--<span class="pay-way">{{ payWay == "wx" ? "微信支付" : "支付宝支付" }}:{{modelData.peices}}元</span>-->
            <!--<span class="search-detail" @click="searchDetail">查看预约详情</span>-->
            <div class="back-home" @click="goBackFirst">返回课程中心</div>
          </div>
        </Modal>
      </div>

      <Modal
        :modalInfoShow="modal4"
        :modelInfo="modelData"
        @modalHandle="modalHandle"
      ></Modal>
    </div>
  </div>
</template>

<script>
import Course from "@/components/course/course.vue";
import Comment from "@/components/course/comment.vue";
import Recommended from "@/components/course/courseRecommended.vue";
import Footer from "@/components/footer/my_footer.vue";
import { getCourseIntroduce, getCourseRecommended } from "@/api/otwoo.js";
import {
  getCourseByCourseSeriesId,
  toCollect,
  buyCourse,
  saveIdol,
  setCourseScId,
} from "@/api/course.js";
export default {
  data() {
    return {
      //课程目录
      courseData: [],
      params: "",
      //课程介绍
      courseIntroduce: {
        likes: null,
        courseDuration: 0,
        price: 0,
        categoryStr: "",
      },
      //课程推荐
      courseRecommended: {},
      name: "name1",
      modal1: false,
      //支付方式
      payWay: "wx",
      modal2: false,
      modal3: false,
      modal4: false,
      queryId: "",
      detailInfo: {},
      modelData: {},
      modelData3:{}
    };
  },
  mounted() {
    this.params = this.$route.query;
    //课程介绍
    this.getCourseIntroduce();
  },
  methods: {
    //课程点赞
    addBaseD() {
      this.courseIntroduce.likes = Number(this.courseIntroduce.likes) + 1;
      setCourseScId(this.params.id).then((res) => {
        if (res.code == 200) {
          this.$Message.success("点赞成功");
        } else {
          this.$Message.error(res.message || "点赞失败");
        }
      });
    },
    //立即购买
    buyHandle() {
      if(this.courseIntroduce.isCharge == '1' && this.courseIntroduce.payStatus == 'UNPAID'){
        this.detailInfo = JSON.parse(localStorage.userInfo)
        this.modelData = this.courseIntroduce
        this.modelData.peices = this.courseIntroduce.price.toFixed(2) ||''
        this.modal1 = true;
      }else {
        this.appointHandle()
      }
    },
    okHandle() {},
    cancelHandle() {},
    //立即预约
    appointHandle() {
      buyCourse({
        client: "PC端",
        courseSeriesId: this.courseIntroduce.id,
      }).then(({ code, message,timestamp }) => {
        if (code === 200) {
          this.modal1 = false;
          this.modal3 = true;
          this.modelData3.timestamp = timestamp
          this.$Message.success("加入学习成功");
        }
      });
    },
    //返回选择支付方式
    // modalHandle() {
    //   this.modal2 = false;
    //   this.modal1 = true;
    // },
    //查看预约详情
    searchDetail() {
      this.modal4 = true;
      this.modal3 = false;
    },
    //改变详情弹窗的显示
    modalHandle() {
      this.modal4 = false;
    },
    goBackFirst(){
      this.modal3 = false;
      this.$router.push({
        path: "/courseCenter",
      });
    },
    //收费免费切换不同的显示
    isFreeHandle() {
      let freeColor = "#ffab60";
      let noFreeColor = "#fd5151";
      if (this.params.isCharge === "0") {
        return freeColor;
      } else {
        return noFreeColor;
      }
    },
    //课程介绍
    getCourseIntroduce() {
      getCourseIntroduce({ id: this.params.id }).then((res) => {
        this.courseIntroduce = res.result;
      });
    },
    //课程目录
    getCourseByCourseSeriesId() {
      getCourseByCourseSeriesId(this.params.id).then((res) => {
        this.courseData = res.result;
      });
    },
    //课程推荐
    getCourseRecommended() {
      getCourseRecommended({ id: this.params.id }).then((res) => {
        this.courseRecommended = res.result;
      });
    },
    // 关注
    follow() {
      // this.info.follow = !this.info.follow;
      saveIdol({
        idolId: this.courseIntroduce.expertId,
        type: "0",
      }).then(({ code, result }) => {
        if (code === 200 && result) {
          this.$Message.success("操作成功");
          this.getCourseIntroduce();
        }
      });
    },
    //点击确定收藏
    toCollect() {
      toCollect({
        relationId: this.params.id,
        typeId: "1002001",
      }).then(({ code, result }) => {
        if (code === 200 && result) {
          this.$Message.success("操作成功");
          this.getCourseIntroduce();
        }
      });
    },
    //切换tab页签
    tabChange(name) {
      this.name = name;
      if (this.name === "name1") {
        this.getCourseIntroduce();
      } else if (this.name === "name2") {
        this.getCourseByCourseSeriesId();
      } else if (this.name === "name3") {
      } else {
        this.getCourseRecommended();
      }
    },
    // 免费试看跳转
    freeTrial(val) {
      const params = {
        id: val.id,
        courseId: this.params.id,
        courseName: this.params.name,
        loading: this.courseIntroduce.loading,
        playTime: val.playTime, //当前播放位置
        courseWatchCount: this.courseIntroduce.courseWatchCount,
        learnNum: this.courseIntroduce.learnNum,
        expertIsSub: this.courseIntroduce.expertIsSub,
      };
      if (val.sourceType === ".mp4") {
        //courseVideo 视频
        this.$router.push({
          path: "/courseVideo",
          query: params,
        });
      } else if (val.sourceType === ".mp3") {
        //音频
        this.$router.push({
          path: "/courseAudio",
          query: params,
        });
      } else {
        //图文
        window.open(val.sourcePath);
      }
      // if (val) {
      //   // 音频
      //   this.$router.push({
      //     path: "/courseAudio",
      //     query: params,
      //   });
      // } else {
      //   // 视频
      //   this.$router.push({
      //     path: "/courseVideo",
      //     query: params,
      //   });
      // }
    },
  },
  components: { Course, Comment, Recommended, Footer },
};
</script>

<style lang="scss" scoped>
.detail-content {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  padding-bottom: 50px;
  position: relative;
  .banner {
    width: 100%;
    height: calc(373 / 1920 * 100vw);
    background: #2f2e2e;
    opacity: 0.72;
    display: flex;
    position: relative;
    .course-information {
      width: calc(1400 / 1920 * 100vw);
      height: calc(259 / 1920 * 100vw);
      margin: calc(27 / 1920 * 100vw) auto 0px;
      display: flex;
      .course-information-img {
        width: calc(415 / 1920 * 100vw);
        height: inherit;
        background-color: #fff;
        border-radius: calc(10 / 1920 * 100vw);
        background-size: cover;
        overflow: hidden;
      }
      .course-information-text {
        margin-left: calc(44 / 1920 * 100vw);
        .course-information-title {
          display: inline-block;
          font-size: calc(26 / 1920 * 100vw);
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: calc(24 / 1920 * 100vw);
          margin-top: calc(38 / 1920 * 100vw);
        }
        .teacher-information-row {
          margin-top: calc(21 / 1920 * 100vw);
          display: flex;
          align-items: center;
          .header-img {
            width: calc(37 / 1920 * 100vw);
            height: calc(37 / 1920 * 100vw);
            border-radius: 50%;
            overflow: hidden;
            background: #fff;
            cursor: pointer;
            > img {
              width: 100%;
              height: 100%;
            }
          }
          .teacher-name {
            display: inline-block;
            font-size: calc(14 / 1920 * 100vw);
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: calc(24 / 1920 * 100vw);
            margin-left: calc(12 / 1920 * 100vw);
            cursor: pointer;
          }
        }
        .project-all {
          margin-top: calc(23 / 1920 * 100vw);
          .project-el {
            display: inline-block;
            width: calc(94 / 1920 * 100vw);
            height: calc(30 / 1920 * 100vw);
            font-size: calc(16 / 1920 * 100vw);
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            background: #e94b52;
            border-radius: 4px;
            text-align: center;
            line-height: calc(30 / 1920 * 100vw);
            margin-right: calc(13 / 1920 * 100vw);
            cursor: pointer;
          }
        }
        .active {
          margin-top: calc(45 / 1920 * 100vw);
          font-size: calc(16 / 1920 * 100vw);
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: calc(24 / 1920 * 100vw);
          .divider {
            margin: 0px calc(12 / 1920 * 100vw);
          }
        }
      }
      .collect-share {
        margin-left: auto;
        display: flex;
        .collect,
        .share {
          width: calc(83 / 1920 * 100vw);
          height: calc(30 / 1920 * 100vw);
          line-height: calc(30 / 1920 * 100vw);
          border-radius: calc(15 / 1920 * 100vw);
          background: #ffffff;
          color: #2d2d2d;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-top: calc(3 / 1920 * 100vw);
          cursor: pointer;
        }
        .collect {
          .ivu-icon {
            margin-top: calc(-1 / 1920 * 100vw);
          }
        }
        .share {
          > img {
            width: calc(15 / 1920 * 100vw);
            height: calc(16 / 1920 * 100vw);
            margin-top: calc(-3 / 1920 * 100vw);
            margin-right: calc(5 / 1920 * 100vw);
          }
          margin-left: calc(12 / 1920 * 100vw);
        }
      }
    }
    .sell {
      width: calc(1400 / 1920 * 100vw);
      height: calc(113 / 1920 * 100vw);
      background: #ffffff;
      box-shadow: 0px calc(4 / 1920 * 100vw) calc(16 / 1920 * 100vw) 0px
        rgba(234, 234, 234, 0.78);
      border-radius: calc(10 / 1920 * 100vw);
      padding: 0px calc(52 / 1920 * 100vw) 0px calc(35 / 1920 * 100vw);
      position: absolute;
      left: 50%;
      bottom: calc(-56 / 1920 * 100vw);
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price-title {
        font-size: calc(18 / 1920 * 100vw);
        font-family: PingFang SC;
        font-weight: 500;
        color: #3e3d3d;
        line-height: calc(24 / 1920 * 100vw);
        .price {
          font-size: calc(32 / 1920 * 100vw);
          font-family: PingFang SC;
          /*font-weight: bold;*/
          // color: #fd5151;
          line-height: calc(24 / 1920 * 100vw);
          margin-left: calc(6 / 1920 * 100vw);
        }
      }
      .buy-btn {
        width: calc(150 / 1920 * 100vw);
        height: calc(50 / 1920 * 100vw);
        background: #fd5151;
        border-radius: calc(25 / 1920 * 100vw);
        font-size: calc(18 / 1920 * 100vw);
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: calc(24 / 1920 * 100vw);
        cursor: pointer;
      }
    }
  }
  .course-wrap {
    width: calc(1400 / 1920 * 100vw);
    min-height: calc(475 / 1920 * 100vw);
    background: #ffffff;
    box-shadow: 0px calc(4 / 1920 * 100vw) calc(16 / 1920 * 100vw) 0px
      rgba(234, 234, 234, 0.78);
    border-radius: calc(10 / 1920 * 100vw);
    margin: calc(79 / 1920 * 100vw) auto 0px;
    padding: calc(10 / 1920 * 100vw) calc(20 / 1920 * 100vw);
    :deep(.ivu-tabs-tab) {
      font-size: 16px;
      font-weight: 500;
    }
    :deep(.ivu-tabs-tab:hover) {
      color: #fa7e7e;
    }
    .directory {
      // height: calc(393/1920*100vw);
      margin-top: calc(18 / 1920 * 100vw);
    }
  }
}

.follow {
  border-radius: calc(20 / 1920 * 100vw);
  padding: calc(5 / 1920 * 100vw) calc(15 / 1920 * 100vw);
  margin-left: calc(20 / 1920 * 100vw);
  cursor: pointer;
  img {
    vertical-align: middle;
  }
  // &:hover {
  //   cursor: pointer;
  //   background-color: #fa3c3c;
  // }
}
.course-follow {
  background-color: #fd5151;
  color: #fff;
}

.course-follownot {
  color: #fff;
  background-color: #f90;
  border-color: #f90;
}
</style>
<style lang="less" scoped>
  //预约弹窗
  :deep(.ivu-modal-body) {
    padding: 16px 40px;
  }
  .content {
    padding: 20px 30px !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 4px;
    .title {
      padding-bottom: 15px;
      border-bottom: 1px solid #e3e3e3;
      font-size: 14px;
      color: #333333;
    }
    .info {
      display: flex;
      align-items: center;
      margin-top: 30px;
      .face {
        width: 40px;
        height: 40px;
        border: 1px solid #e3e3e3;
        border-radius: 100%;
        background-size: cover;
      }
      .school-info {
        margin-left: 20px;
        .name {
          color: #333333;
          font-size: calc(14 / 1920 * 100vw);
        }
        .school-name {
          color: #999999;
          font-size: 12px;
          > span:last-of-type {
            /*margin-left: 20px;*/
          }
        }
      }
    }
    .base-info-title {
      margin-top: 20px;
    }
    .base-info {
      margin-top: 20px;
      .base,
      .time {
        > span:first-of-type {
          color: #999999;
          font-size: 14px;
        }
      }
      .time {
        margin-top: 15px;
      }
    }
    .pay-title {
      margin-top: 20px;
    }
    .choose-pay-way {
      display: flex;
      margin-top: 20px;
      .wx {
        width: 240px;
        height: 42px;
        background: #f5f5f5;
        border-radius: 4px;
        display: flex;
        align-items: center;
        cursor: pointer;
        > img {
          width: 19px;
          height: 16px;
          margin-left: 20px;
        }
        > span {
          font-size: 14px;
          margin-left: 20px;
        }
      }
      .zfb {
        width: 240px;
        height: 42px;
        background: #f5f5f5;
        border-radius: 4px;
        display: flex;
        align-items: center;
        margin-left: 20px;
        cursor: pointer;
        > img {
          width: 18px;
          height: 16px;
          margin-left: 20px;
        }
        > span {
          font-size: 14px;
          margin-left: 20px;
        }
      }
    }
  }
  .pay-row {
    display: flex;
    align-items: center;
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    .price {
      color: #fd5151;
      font-weight: bold;
      > span:first-of-type {
        font-size: 14px;
      }
      > span:last-of-type {
        font-size: 18px;
      }
    }
    .pay-btn {
      width: 160px;
      height: 48px;
      background: #fd5151;
      font-size: 18px;
      color: #fff;
      border-radius: 4px;
      text-align: center;
      line-height: 48px;
      margin-left: 22px;
      cursor: pointer;
    }
  }

  //支付弹窗
  .pay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    > p {
      text-align: center;
    }
    .qr-code {
      width: 245px;
      height: 245px;
      border: 1px solid red;
      margin-top: 17px;
    }
    .title {
      font-size: 24px;
      font-weight: bold;
      display: inline-block;
      margin-top: 8px;
    }
    .price {
      > span:nth-of-type(2) {
        font-size: 14px;
        font-weight: bold;
        color: #fd5151;
        margin-left: 8px;
      }
      > span:nth-of-type(3) {
        font-size: 22px;
        font-weight: bold;
        color: #fd5151;
      }
    }
    .prompt {
      width: 280px;
      height: 56px;
      background: #fd5151;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 16px;
      > img {
        width: 34px;
        height: 33px;
      }
      .prompt-text {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        color: #fff;
        margin-left: 16px;
      }
    }
    .choose-back {
      display: flex;
      align-items: center;
      margin-top: 55px;
      cursor: pointer;
      > img {
        width: 8px;
        height: 13px;
      }
      > span {
        color: #176eff;
        margin-left: 6px;
      }
    }
  }

  //支付成功弹窗
  .success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 140px;
    > img {
      width: 82px;
      height: 82px;
      margin-top: 120px;
    }
    .success-title {
      font-size: 32px;
      margin-top: 14px;
    }
    .id {
      margin-top: 14px;
    }
    .pay-way {
      margin-top: 14px;
    }
    .search-detail {
      margin-top: 14px;
      color: #176eff;
      cursor: pointer;
    }
    .back-home {
      width: 280px;
      height: 46px;
      border: 1px solid #fd5151;
      border-radius: 23px;
      color: #fd5151;
      text-align: center;
      line-height: 46px;
      cursor: pointer;
      margin-top: 14px;
    }
  }
</style>
